<template xmlns:slot="http://www.w3.org/1999/html">
<!--  注意一定要写div-->
  <div id="home">
  <nav-tab class="home-bar" >
    <div slot="center">京东首页</div>
  </nav-tab>
    <tab-control :title="['浩钦','哥哥','牛逼']" @clickActive="clickActive" ref="controlTabA" class="controlTabA" v-show="isShowControl"></tab-control>
  <scroll class="scrollContent" ref="scroll" :probe-type="3" :pull-up-load="true" @scrollEvent="scrollEvent"
  @pulling="pulling"
  >

  <home-swiper :banner="banner"  @imageSwiper="imageLoadOver"></home-swiper>
  <home-recomment :recomment="recommend"></home-recomment>
    <home-feature></home-feature>
    <tab-control :title="['浩钦','哥哥','牛逼']" @clickActive="clickActive" ref="controlTabB"></tab-control>
    <goods-list :goods="goods[currentIndex].list"></goods-list>


    </scroll>
    <back-top @click.native="backTop" v-show="isShow"></back-top>

  </div>
</template>

<script>
/* index.js的方法一直报错*/
  import NavTab from "../../components/common/navtab/NavTab";
  import GoodsList from "../../components/content/goods/GoodsList";
  import TabControl from "../../components/content/tabControl/TabControl";
  import Scroll from "../../components/common/scroll/Scroll";
  import BackTop from "../../components/content/backTop/BackTop";

  import {getHomeMultidata,getHomeData} from "../../network/home";
  import {dobounce} from "../../common/ytils";
  import {itemLoading} from "../../common/mixin";


import HomeSwiper from "./childComps/HomeSwiper";
  import HomeRecomment from "./childComps/HomeRecomment";
  import HomeFeature from "./childComps/HomeFeature";



  export default {
    name: "Home",
    data(){
      return{
        banner: [],
        dKeyword: null,
        keywords: null,
        recommend:[],
        goods: {
          'pop': {page:0, list: []},
          'new': {page:0, list: []},
          'sell': {page:0, list: []},

        },
        currentIndex: 'pop',
        isShow: false,
        tabControlOffSetTop: 0,
        isShowControl: false,
        saveY: 0
      }
    },
    mixins: [itemLoading],


    components: {
      BackTop,
      Scroll,
      GoodsList,
      NavTab,



      TabControl,
      HomeFeature,
      HomeRecomment,
      HomeSwiper,



    },
    created() {
      this.getHomeMultidataOM();

      this.getHomeDataOM('pop')
      this.getHomeDataOM('new')
      this.getHomeDataOM('sell')


    },
    activated() {
      this.$refs.scroll.scroll.scrollTo(0,this.saveY,0)
      this.$refs.scroll.scroll.refresh()
    },
    deactivated() {
      this.saveY= this.$refs.scroll.scroll.y
      this.$bus.$off('imageItemLoad',this.itemLoad)

    },
    mounted() {



    },

    methods: {
      //事件监听
      clickActive(index){
        if(index===1)this.currentIndex='new'
        else if(index===2)this.currentIndex='sell'

        this.$refs.controlTabA.currentIndex=index
        this.$refs.controlTabB.currentIndex=index

      },
      backTop(){
        this.$refs.scroll.scroll.scrollTo(0,0,1000)

      },
      scrollEvent(position) {

        if( (Math.abs(position.y))>1000){

         this.isShow= true
       }
       else{
          this.isShow= false
        }

        if((Math.abs(position.y))>=this.tabControlOffSetTop){
          this.isShowControl=true
        }
        else{
          this.isShowControl=false
        }
      },
      pulling(){
        this.getHomeDataOM(this.currentIndex)
      },
      imageLoadOver(){
        this.tabControlOffSetTop=this.$refs.controlTabB.$el.offsetTop;
      },


      //网络请求
      getHomeMultidataOM(){
        getHomeMultidata().then(res =>{
          this.banner=res.data.banner.list
          this.recommend= res.data.recommend.list

        })
      },
      getHomeDataOM(type){
        const page=this.goods[type].page+1
        getHomeData(type,page).then(res =>{
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page++

          this.$refs.scroll.scroll.finishPullUp()
            }
        )
      }
    }
  }
</script>

<style scoped>
  #home{
    padding-top: 44px;
    height: 100vh;
    position: relative;
  }
.home-bar{
  background-color: #ff8198;
  color: #eeeeee;
  font-size: 20px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.scrollContent{
    position: absolute;
  overflow: hidden;

  left: 0;
  right: 0;
  top:44px;
  bottom: 49px;


}
  .controlTabA{
    position: relative;
    z-index: 9;
  }
</style>